<template>
  <div>
    <h3>教学安排表</h3>

    <el-form ref="form" label-width="80px" inline align="center">
      <el-form-item label="学年学期">
        <el-select v-model="model" placeholder="2023-2024年第一学期">
          <el-option
            label="2022-2023第二学期"
            value="2022-2023第二学期"
          ></el-option>
          <el-option
            label="2022-2023第一学期"
            value="2022-2023第一学期"
          ></el-option>
          <el-option
            label="2021-2022年第二学期"
            value="2021-2022年第二学期"
          ></el-option>
          <el-option
            label="2021-2022年第一学期"
            value="2021-2022年第一学期"
          ></el-option>
          <el-option
            label="2020-2021年第一学期"
            value="2020-2021年第一学期"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-radio v-model="radio" label="格式一"></el-radio>
        <el-radio v-model="radio" label="格式二"></el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="show">检索</el-button>
        <el-button type="primary" size="mini">打印</el-button>
      </el-form-item>
    </el-form>

    <div class="plan-header" v-show="isShow">
      <h3>郑州轻工业大学学生课表</h3>
      <p>{{ model }}</p>

      <p>
        <span style="margin-right: 20px">学号:522307260110</span>
        <span>姓名:{{ name.slice(0, 3) }}</span>
      </p>

      <el-table
        :data="teachingPlanInfo"
        style="width: 100%"
        border
        :header-cell-style="{ background: '#2086ce', color: '#ffffff' }"
        v-loading="loading"
      >
        <el-table-column label="序号" width="100" type="index" align="center">
        </el-table-column>

        <el-table-column label="课程" width="300" prop="subject" align="left">
        </el-table-column>

        <el-table-column
          label="学分"
          width="60"
          prop="hourCredit"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="总学时"
          width="60"
          prop="hourCredit"
          align="center"
        >
        </el-table-column>

        <el-table-column
          label="讲授学时"
          width="60"
          prop="hourCredit"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="上机学时"
          width="60"
          prop="hourCredit"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="课程类别"
          width="200"
          prop="courseType"
          align="left"
        >
        </el-table-column>

        <el-table-column
          label="授课方式"
          width="60"
          prop="lectureType"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="考核方式"
          width="80"
          prop="evaluationMode"
          align="center"
        >
        </el-table-column>

        <el-table-column
          label="任课教师"
          width="60"
          prop="teacher"
          align="center"
        >
        </el-table-column>

        <el-table-column label="周次" width="60" prop="weekTime" align="center">
        </el-table-column>
        <el-table-column label="节次" width="100" prop="section" align="center">
        </el-table-column>

        <el-table-column
          label="地点"
          width="120"
          prop="classAddress"
          align="center"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>


<script>
import { mapGetters } from "vuex";
export default {
  name: "Teachingplantable",
  components: {},
  data() {
    return {
      model: "",
      radio: "",
      week: "",
      teachingPlanInfo: [],
      isShow: false,
      loading: true,
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },

  //获取课程数据
  methods: {
    async getSubjectInfo() {
      let teachingPlanInfo = await import("@/data/teachingplan.json");
      console.log(teachingPlanInfo);
      this.teachingPlanInfo = teachingPlanInfo.teachingplan;
    },
    show() {
      if (this.radio == "格式二") {
        this.isShow = true;
        setTimeout(() => {
          this.loading = false;
        }, 2000);
      } else if (this.radio == "格式一") {
        alert("暂时不支持格式一检索");
      } else {
        alert("请选择检索格式");
      }
    },
  },
  mounted() {
    this.getSubjectInfo();
  },

  watch: {
    model() {
      this.isShow = false;
    },
  },
};
</script>


<style >
h3 {
  text-align: center;
}
.plan-header p {
  text-align: center;
  font-size: 13px;
}
.has-gutter th .cell {
  text-align: center;
}
</style>